<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
  <style>
    .d1{
      width:200px;
      height:200px;
      border: red 5px solid;
      background-color:greenyellow;
      /*boder-radius:像素值越大圆越圆*/
      border-radius: 30px;
      border-radius:100px;
  }
    .d2 {
      width:200px;
      height:60px;
      border: red 5px solid;
      background-color:greenyellow;
      border-radius: 30px;
    }
    .d3 {
      width: 200px;
      height: 100px;
      background-color: cyan;
      /* 边框圆角的值为长方形宽度与高度的一半可以切椭圆 */
      border-radius: 100px/50px;
    }
  </style>
</head>
<body>
<span>span</span><span class="s2">span</span><span>span</span>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>